#state_GameState{
  @import './hud_parts/world_page.scss';
  @import './hud_parts/task_page.scss';
  @import './hud_parts/show_message.scss';
  @import './hud_parts/alert_board.scss';
  @import './hud_parts/backpack.scss';
  @import './hud_parts/player_page.scss';
  @import './hud_parts/battle_page.scss';
  @import './hud_parts/dialogue.scss';
  @import './hud_parts/shop_board.scss';

  .hud_page{
    position: absolute;
    left: 0;
    top: 35px;
    height: calc(100% - 70px);
    width: 100%;
    pointer-events: all;

    @include InlineAnimation(.3s){
      0%{opacity: 0;}
      100%{opacity: 1;}
    }
  }

  header{
    height: 35px;
    background: #555;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    color: white;
    font-size: 12px;

    .left{
      @include BreakText;
      pointer-events: all;
    }

    .right{
      display: flex;
      align-items: center;

      button{
        margin-left: 10px;
        @include IconButtonColor(20px);
      }
    }
  }

  .bottom_bar{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    @include S(height, 40px);
    background: white;
    display: flex;
    justify-content: space-around;
    @include DropShadow;
    border-top: 1px solid #dedede;

    .item{
      @include ButtonText;
      padding: 10px 0;
      width: 100%;
      text-align: center;
      position: relative;
      pointer-events: all;
      cursor: pointer;

      &::after{
        content: '';
        display: block;
        width: 0px;
        @include S(height, 3px);
        background: $colorBlueBright;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        @include S(bottom, 6px);
        transition: .3s;
      }

      &.active::after{
        @include S(width, 30px);
      }
    }
  }

}